<template>
  <div class="home">
    <div class="home-header">
      <el-header>
        <h2>电商后台管理系统</h2>
      </el-header>
    </div>

    <div class="home-main">
      <div class="left">
        <el-aside width="200px">
          <el-menu
            :default-openeds="['1', '3']"
            router
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <!-- <el-submenu index="/home/homes">
              <template slot="title">
                <i class="el-icon-message">工作台</i>
              </template>
            </el-submenu>-->
            <el-submenu index="/worktable">
              <template slot="title">工作台</template>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">商品</template>
              <el-menu-item-group>
                <el-menu-item index="/home">商品管理</el-menu-item>
                <el-menu-item index="/home">商品分类</el-menu-item>
                <el-menu-item index="/home">商品规格</el-menu-item>
                <el-menu-item index="/home">商品评价</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">营销</template>
              <!-- <el-menu-item-group>
                <el-submenu index="1-4">
                  <template slot="title">秒杀管理</template>
                  <el-menu-item index>秒杀配置</el-menu-item>
                  <el-menu-item index>秒杀商品</el-menu-item>
                </el-submenu>
                <el-menu-item index="/home/homes">砍价管理</el-menu-item>
                <el-menu-item index="/home/about">直播管理</el-menu-item>
                <el-menu-item index="/home/tuan">拼团管理</el-menu-item>
              </el-menu-item-group> -->
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">订单</template>
              <el-menu-item-group>
                <el-menu-item index="/home">订单管理</el-menu-item>
                <el-menu-item index="/home">订单概述</el-menu-item>
                <el-menu-item index="/home">评价管理</el-menu-item>
                <el-menu-item index="/home">订单配送</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title">团长</template>
              <el-menu-item-group>
                <el-menu-item index="/home/commander/regulator">团长管理</el-menu-item>
                <el-menu-item index="/home/commander/check">团长审核</el-menu-item>
                <el-menu-item index="/home/commander/grade">团长等级</el-menu-item>
                <el-menu-item index="/home/commander/setting">设置</el-menu-item>
                <el-menu-item index="/home/commander/course">路线</el-menu-item>
                <el-menu-item index="/home/commander/commission">佣金流水</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="6">
              <template slot="title">门店</template>
              <el-menu-item-group>
                <el-menu-item index="/home">申请列表</el-menu-item>
                <el-menu-item index="/home">配置</el-menu-item>
                <el-menu-item index="/home">门店</el-menu-item>
                <el-menu-item index="/home">商品</el-menu-item>
                <el-menu-item index="/home">订单</el-menu-item>
                <el-menu-item index="/home">提现</el-menu-item>
                <el-menu-item index="/home">到店付款</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="7">
              <template slot="title">仓库</template>
              <el-menu-item-group>
                <el-menu-item index="/home">仓库管理</el-menu-item>
                <el-menu-item index="/home">配送小区</el-menu-item>
                <el-menu-item index="/home">入库管理</el-menu-item>
                <el-menu-item index="/home">入库查询</el-menu-item>
                <el-menu-item index="/home">出库管理</el-menu-item>
                <el-menu-item index="/home">出库查询</el-menu-item>
                <el-menu-item index="/home">盘点管理</el-menu-item>
                <el-menu-item index="/home">现有库存</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="8">
              <template slot="title">分销</template>
              <el-menu-item-group>
                <el-menu-item index="/home">超级会员</el-menu-item>
                <el-menu-item index="/home">代理商</el-menu-item>
                <el-menu-item index="/home">运营商</el-menu-item>
                <el-menu-item index="/home">佣金记录</el-menu-item>
                <el-menu-item index="/home">会员审核</el-menu-item>
                <el-menu-item index="/home">设置</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="9">
              <template slot="title">小程序</template>
              <el-menu-item-group>
                <el-menu-item index="/home">支付</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="10">
              <template slot="title">权限</template>
              <el-menu-item-group>
                <el-menu-item index="/home">员工管理</el-menu-item>
                <el-menu-item index="/home">角色管理</el-menu-item>
                <el-menu-item index="/home">客服管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>

      <div class="right">
        <el-main>
          <router-view />
        </el-main>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped lang='scss'>
.home {
  width: 100%;
  height: 100%;
}
.home-header {
  width: 100%;
  height: 6%;
  background-color: rgb(52, 134, 228);
  .el-header {
    display: flex;
    align-items: center;
    color: #ffffff;
    font-weight: bold;
  }
}
.home-main {
  display: flex;
  overflow: scroll;
  height: 94%;
}
.home-main .left{
  // width: 10%;
  height: auto;
  background: rgb(84, 92, 100);
}
.home-main .right{
  height: 100%;
  width: 100%;
}
</style>